<template>
  <div class="video" style="margin: 15px;">
    <el-row :gutter="214">
      <el-col :span="6" v-for="a in 9" style="margin-bottom: 25px">
        <div style="width: 200px;height: 215px">
          <div style="height: 130px;width: 200px;margin-bottom: 10px;overflow: hidden">
            <img class="img" :src="data.imgUrl" alt="" style="">
          </div>
          <div class="title" style="height: 40px;font-size: 15px;margin-bottom: 3px">
            {{ data.title }}
          </div>
          <div style="font-size: 14px;line-height: 30px">
            <el-row :gutter="10">
             <el-col :span="4">
               <img :src="data.headUrl" style="height: 30px;width: 30px;border-radius: 999px">
             </el-col>

             <el-col :span="16">
               {{ data.username }}
             </el-col>

             <el-col :span="4">
               <el-popover
                   trigger="click"
                   placement="bottom"
                   width="240">
                 <div style="height: 30px;font-size: 16px;font-weight: bold;tcolor: black">
                   不感兴趣:
                 </div>
                 <div class="bgm" style="height: 30px;font-size: 14px;line-height: 30px">
                   <el-icon><CloseBold /></el-icon>&nbsp;&nbsp;减少相似内容推荐
                 </div>
                 <div class="bgm" style="height: 30px;font-size: 14px;line-height: 30px">
                   <el-icon><Hide /></el-icon>&nbsp;&nbsp;不看该作者:{{ data.username }}
                 </div>
                 <template #reference>
                   <el-icon><MoreFilled /></el-icon>
                 </template>
               </el-popover>
             </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'



const data=ref({
  imgUrl:"/video/猴子.jpg",
  headUrl:"/imgs/登录注册/head1.jpg",
  title:"骚年，你对弼马温一无所知，弼马温有多香?",
  username:"爱吃保底的柒柒"
})
</script>

<style scoped>
p{
  padding: 0;
  margin: 0;
}
.el-icon{
  color: #8493a5;
}
.video:hover{
  cursor: pointer;
}
.title:hover{
  color: #1989fa;
}
.bgm:hover{
  background-color: rgba(132, 147, 165,0.1);
}
.img{
  width: 200px;
  height: 130px;
  object-fit: cover;
  position: relative;
}
.img:hover{
  transition: transform 1s ease;
  transform: scale(1.4);
}
</style>